<template>
  <div>
    <el-dialog title="更改联系人" :close-on-click-modal="false" :visible.sync="visible" width="70%" @close="visible=false">
      <el-form :inline="true" :model="pamars">
        <el-form-item label="会员账号">
          <el-input clearable v-model="pamars.mobile" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getMsgList()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="elTable" @row-click="onLine" highlight-current-row :data="dataList" row-key="Id" border style="100%">
        <el-table-column prop="mobile" align="center" label="会员账号">
        </el-table-column>
        <el-table-column prop="nickname" align="center" label="会员昵称">
        </el-table-column>
        <!--              <el-table-column  label="选择联系人">
                  <template slot-scope="scope">
                    <el-radio v-model="radio" :label="scope.row.id"></el-radio>
                    </template>
               </el-table-column> -->
      </el-table>
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pamars.page" :page-sizes="[10, 20, 50, 100]" :page-size="pamars.limit" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
      <el-form>
        <el-form-item style="text-align: right;margin-top: 20px;">
          <el-button @click="unDataPeople">
            确定
          </el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
import seviceApi from '@/api/serviceApi.js'
export default {
  data () {
    return {
      visible: false,
      dataList: [],
      totalPage: 0,
      popId: null,

      radio: 1,
      pamars: {
        page: 1,
        limit: 10,
        mobile: ''
      },
    }
  },
  mounted () {

  },

  methods: {

    onLine (row, column, event) {
      // debugger
      // console.log(row.id)
      this.radio = row.id
    },
    init (id) {
      this.visible = true
      this.popId = id;
      this.getList()
    },
    getList () {
      seviceApi.getShopMemberlist(this.pamars).then(res => {
        if (res && res.data.code == 200) {
          this.dataList = res.data.page.list
          this.totalPage = res.data.page.totalCount
          this.$refs.elTable.setCurrentRow()
        }
      })
    },
    getMsgList () {
      // console.log(this.pamars)
      this.pamars.page = 1
      this.getList()
    },

    sizeChangeHandle (val) {
      this.pamars.limit = val
      this.getList()
    },
    currentChangeHandle (val) {
      this.pamars.page = val
      this.getList()
    },
    unDataPeople () {
      this.$confirm('是否更改到该会员下?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // console.log(this.popId,"打印父id")
        // console.log(this.radio,"子id")
        let param = {
          id: this.popId,
          parent_user_id: this.radio
        }
        // console.log(param)
        seviceApi.getUpdateGrade(param).then(res => {
          if (res && res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '更改成功!'
            })
            // console.log("更改成功")
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }

  }
}
</script>

<style lang="scss" >
.el-table__body tr.current-row > td {
  background-color: #69a8ea !important;
  color: #fff;
}
</style>
